<template>
  <Layer :layer="layer" @confirm="submit">
    <el-form :model="ruleForm" :rules="rules" ref="form" label-width="120px" style="margin-right:30px;">
      <el-form-item label="用户名：" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="昵称：" prop="nickName">
        <!-- <el-input v-model="ruleForm.number" oninput="value=value.replace(/[^\d]/g,'')" placeholder="只能输入正整数"></el-input> -->
        <el-input v-model="ruleForm.nickName" placeholder="请输入昵称"></el-input>
      </el-form-item>
			<el-form-item label="角色：" prop="role">
			  <el-select v-model="ruleForm.role" placeholder="请选择" clearable>
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
      <el-form-item label="超级管理员：" prop="isAdmin">
        <el-radio-group v-model="ruleForm.isAdmin">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-switch
          v-model="ruleForm.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
        <!-- <span class="statusName">{{ scope.row.status === 1 ? "启用" : "禁用" }}</span> -->
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import Layer from '@/components/layer/index.vue'
import { add, update } from '@/api/table'
import { updateStatus } from "@/api/system/user"
import { ElMessage } from "element-plus"
export default defineComponent({
  components: {
    Layer
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: true
        }
      }
    }
  },
  setup(props, ctx) {
    let ruleForm = ref({
      name: '',
      nickName:'',
      role:'',
      isAdmin:0,
      status:''
    })
    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
      role: [{ required: true, message: '请选择', trigger: 'blur' }],
      isAdmin: [{ required: true, message: '请选择', trigger: 'blur' }],
      status: [{ required: true, message: '请选择', trigger: 'blur' }]
    }
    const options = [
      { value: 1, label: '系统管理员'},
      { value: 2, label: '数据统计人员'},
      { value: 3, label: '平台管理员'},
      { value: 4, label: '信息录入人员'},
      { value: 5, label: '普通人员'}
    ]

    // 用于判断新增还是编辑功能
    function init() { 
      console.log(props.layer.row);
      
      if (props.layer.row) {
        ruleForm.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
      } else {

      }
    }
    init()

    // 状态编辑功能
    const handleUpdateStatus = (row: any) => {
      if (!row.id) {
        return
      }
      row.loading = true
      // let params = {
      //   id: row.id,
      //   status: row.status
      // }
      updateStatus(params)
      .then(res => {
        ElMessage({
          type: 'success',
          message: '状态变更成功'
        })
      })
      .catch(err => {
        ElMessage({
          type: 'error',
          message: '状态变更失败'
        })
      })
      .finally(() => {
        row.loading = false
      })
    }

    return {
      ruleForm,
      rules,
      options,
      handleUpdateStatus
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid: boolean) => {
        if (valid) {
          let params = this.ruleForm
          if (this.layer.row) {
            this.updateForm(params)
          } else {
            this.addForm(params)
          }
        } else {
          return false;
        }
      });
    },
    // 新增提交事件
    addForm(params: object) {
      add(params)
      .then(res => {
        this.$message({
          type: 'success',
          message: '新增成功'
        })
        this.layer.show = false
        this.$emit('getTableData', true)
      })
    },
    // 编辑提交事件
    updateForm(params: object) {
      update(params)
      .then(res => {
        this.$message({
          type: 'success',
          message: '编辑成功'
        })
        this.layer.show = false
        this.$emit('getTableData', false)
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.statusName {
  margin-left: 10px;
}
</style>